<script setup>
import CalcGoal from './components/CalcGoal.vue'
import SeasonFormat from './components/SeasonFormat.vue'
import TeacherList from './components/TeacherList.vue'
import MajorList from './components/MajorList.vue'
import MajorEdit from './components/MajorEdit.vue'
import CourseList from './components/CourseList.vue'
import CourseBaseInfo from './components/CourseBaseInfo.vue'
import CourseGoalRelation from './components/CourseGoalRelation.vue'
import CourseContent from './components/CourseContent.vue'
import CourseChapterDetail from './components/CourseChapterDetail.vue'
import CourseAssessment from './components/CourseAssessment.vue'
import TaskView from './components/TaskView.vue'
import DataDict from './components/DataDict.vue'
import TemplateManager from './components/TemplateManager.vue'
import TemplateToFile from './components/TemplateToFile.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { Edit, Setting, Document, User, School, Reading,  DocumentCopy, Collection } from '@element-plus/icons-vue'

const activeMenu = ref('0')
const currentCourse = ref(null) // 当前选中的课程信息
const autoQueryParams = ref(null) // 自动查询参数
const templateExportData = ref(null) // 模板导出数据

function handleMenuSelect(index) {
  activeMenu.value = index
  // 当直接点击菜单时，清除当前课程信息，避免状态残留
  // 但是只在点击课程相关菜单时清除，避免影响导航流程
  if (index === 'course-2' && !currentCourse.value) {
    currentCourse.value = null
  }
}

// 监听菜单切换事件
function handleMenuChange(event) {
  activeMenu.value = event.detail.menuIndex
  
  // 如果是从课程列表跳转到编辑页面，需要加载课程信息
  if (event.detail.menuIndex === 'course-2' && event.detail.courseId) {
    // 这里需要加载课程信息并设置到 currentCourse
    // 由于这是一个异步操作，我们需要在 CourseBaseInfo 组件中处理
    // 这里只是设置一个标记，让组件知道需要加载课程
    currentCourse.value = { id: event.detail.courseId }
  }
}

// 监听模板导出事件
function handleTemplateExport(event) {
  templateExportData.value = event.detail
}

// 监听菜单选择事件
function handleMenuSelectEvent(event) {
  activeMenu.value = event.detail.menuIndex
}

// 处理下一项导航
function handleNextStep(nextMenu, courseInfo = null) {
  //console.log('handleNextStep called:', { nextMenu, courseInfo })
  activeMenu.value = nextMenu
  
  // 如果跳转到CourseContent、CourseChapterDetail或CourseAssessment组件，需要设置自动查询参数
  if ((nextMenu === 'course-4' || nextMenu === 'course-5' || nextMenu === 'course-6') && courseInfo) {
    autoQueryParams.value = {
      grade: courseInfo.grade || courseInfo.year,
      major: courseInfo.major || courseInfo.majorName,
      courseId: courseInfo.courseId || courseInfo.id,
      courseName: courseInfo.name
    }
  } else {
    // 其他情况清除自动查询参数
    autoQueryParams.value = null
  }
  
  if (courseInfo && Object.keys(courseInfo).length > 0) {
    currentCourse.value = courseInfo
  } else {
    currentCourse.value = null
  }
}



onMounted(() => {
  window.addEventListener('menuChange', handleMenuChange)
  window.addEventListener('templateExport', handleTemplateExport)
  window.addEventListener('menuSelect', handleMenuSelectEvent)
})

onUnmounted(() => {
  window.removeEventListener('menuChange', handleMenuChange)
  window.removeEventListener('templateExport', handleTemplateExport)
  window.removeEventListener('menuSelect', handleMenuSelectEvent)
})
</script>

<template>
<el-container style="height: 100vh;">
  <el-header style="background-color: #545c64; color: white; ">
    <h2>教学材料管理工具</h2>
  </el-header>
  
  <el-container>
    <el-aside width="250px" style="background-color: #f5f5f5;">
      <el-menu
        v-model="activeMenu"
        class="el-menu-vertical"
        style="height: 100%;"
        @select="handleMenuSelect"
      >
        
        <!-- 基本信息录入 -->
        <el-sub-menu index="basic">
          <template #title>
            <el-icon :size="20">
              <Document />
            </el-icon>
            <span>基本信息录入</span>
          </template>
          <el-menu-item index="basic-1">学期格式配置</el-menu-item>
        </el-sub-menu>
        
        <!-- 教师信息录入 -->
        <el-sub-menu index="teacher">
          <template #title>
            <el-icon :size="20">
              <User />
            </el-icon>
            <span>教师信息录入</span>
          </template>
          <el-menu-item index="teacher-1">教师列表</el-menu-item>
        </el-sub-menu>
        
        <!-- 专业信息录入 -->
        <el-sub-menu index="major">
          <template #title>
            <el-icon :size="20">
              <School />
            </el-icon>
            <span>专业信息录入</span>
          </template>
          <el-menu-item index="major-1">专业列表</el-menu-item>
          <el-menu-item index="major-2">编辑专业信息</el-menu-item>
        </el-sub-menu>
        
        <!-- 课程信息录入 -->
        <el-sub-menu index="course">
          <template #title>
            <el-icon :size="20">
              <Reading />
            </el-icon>
            <span>课程信息录入</span>
          </template>
          <el-menu-item index="course-1">课程列表</el-menu-item>
          <el-menu-item index="course-2">基本信息</el-menu-item>
          <el-menu-item index="course-3">课程目标</el-menu-item>
          <el-menu-item index="course-4">学习内容</el-menu-item>
          <el-menu-item index="course-5">具体章节内容</el-menu-item>
          <el-menu-item index="course-6">考核方式和课程评定</el-menu-item>
        </el-sub-menu>
        
        <!-- 查看数据字典 -->
        <el-menu-item index="dictionary">
          <el-icon :size="20">
            <Collection />
          </el-icon>
          <span>查看数据字典</span>
        </el-menu-item>
        
        <!-- 教学材料文档 -->
        <el-sub-menu index="material">
          <template #title>
            <el-icon :size="20">
              <DocumentCopy />
            </el-icon>
            <span>教学材料文档</span>
          </template>
          <el-menu-item index="material-1">模板管理</el-menu-item>
          <el-menu-item index="material-2">材料导出</el-menu-item>
          <el-menu-item index="material-3">下载任务查看</el-menu-item>
        </el-sub-menu>
        
        <!-- 计算目标达成度 -->
        <el-menu-item index="1">
          <el-icon :size="20">
            <Edit />
          </el-icon>
          <span>计算目标达成度</span>
        </el-menu-item>
        
        <!-- 其他功能 -->
        <el-menu-item index="2">
          <el-icon :size="20">
            <Setting />
          </el-icon>
          <span>其他功能敬请期待</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-main style="background-color: #ffffff;">
      <!-- 调试信息 -->
      <!-- <div style="position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 5px; font-size: 12px; z-index: 9999;">
        <div>activeMenu: {{ activeMenu }}</div>
        <div>currentCourse: {{ currentCourse ? '有数据' : '无数据' }}</div>
      </div> -->
      
      <CalcGoal v-if="activeMenu === '1'" />
      <SeasonFormat v-else-if="activeMenu === 'basic-1'" />
      <TeacherList v-else-if="activeMenu === 'teacher-1'" />
      <MajorList v-else-if="activeMenu === 'major-1'" />
      <MajorEdit v-else-if="activeMenu === 'major-2'" />
      <CourseList v-else-if="activeMenu === 'course-1'" />
      <CourseBaseInfo 
        v-else-if="activeMenu === 'course-2'" 
        :course-info="currentCourse || null"
        @next-step="handleNextStep"
      />
      <CourseGoalRelation 
        v-else-if="activeMenu === 'course-3'" 
        :course-info="currentCourse || null"
        @next-step="handleNextStep"
      />
      <CourseContent 
        v-else-if="activeMenu === 'course-4'" 
        :course-info="currentCourse || null"
        :auto-query-params="autoQueryParams"
        @next-step="handleNextStep"
      />
      <CourseChapterDetail 
        v-else-if="activeMenu === 'course-5'" 
        :course-info="currentCourse || null"
        :auto-query-params="autoQueryParams"
        @next-step="handleNextStep"
      />
      <CourseAssessment 
        v-else-if="activeMenu === 'course-6'" 
        :course-info="currentCourse || null"
        :auto-query-params="autoQueryParams"
      />
      <TemplateManager v-else-if="activeMenu === 'material-1'" />
      <TemplateToFile v-else-if="activeMenu === 'material-2'" :template-data="templateExportData" />
      <TaskView v-else-if="activeMenu === 'material-3'" />
      <DataDict v-else-if="activeMenu === 'dictionary'" />
      <div v-else-if="activeMenu === '2'" style="text-align: center; padding: 50px;">
        <h2>功能二开发中...</h2>
      </div>
      <div v-else style="text-align: center; padding: 50px;">
        <h2>欢迎使用教学材料管理工具</h2>
        
      </div>
    </el-main>
  </el-container>
</el-container>
</template>

<style scoped>

</style>
